<template>
  <div id="checkbox">
    <el-icon class="close-btn" @click="$emit('closeChart')"><Close /></el-icon>
    <el-select
      v-model="value"
      placeholder="Select"
      style="width: 180px"
      @change="changeOption(value)"
    >
      <el-option
        v-for="item in chooses"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>

  <div class="chart">
    <v-chart :option="option"></v-chart>
  </div>
</template>
<script setup>
import { ref, onMounted, toRefs,defineEmits} from "vue";
import {Close} from "@element-plus/icons-vue";

import { useSearchedAccidentsStore } from "@/stores/serachedAccidents";

const { searchedTotal, panData } = toRefs(useSearchedAccidentsStore());
const emit = defineEmits(["closeChart"]);
let value = ref(1);
const chooses = ref([
  { label: "按类型选择", value: 1 },
  { label: "按发生时间选择", value: 2 },
  { label: "按事件等级选择", value: 3 },
  { label: "按处理状态选择", value: 4 },
]);
let option = ref({});

const changeOption = (val) => {
  let data = [];
  /* 根据不同的选择值，生成不同的数据 时间返回折线图，其他统计类型返回饼图 */
  if (val == 1) {
    const arr = panData.value.map((item) => item["事件类型"]);
    data = countBy(arr);
  } else if (val == 2) {
    const arr = panData.value.map((item) => item["发生时间"].slice(0, 7));
    const data=countBy(arr)
    /* data的name属性为年月，value属性为数量 */
    const name=data.map(item=>item.name)
    const dataval=data.map(item=>item.value)
    option.value = {
      xAxis: {
        type: "category",
        data: name,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: dataval,
          type: "line",
        },
      ],
    };
    return;
    
  } else if (val == 3) {
    const arr = panData.value.map((item) => item["事件等级"]);
    data = countBy(arr);
  } else if (val == 4) {
    const arr = panData.value.map((item) => item["处理状态"]);
    data = countBy(arr);
    data.forEach((item)=>{
        if(item.name==0){
            item.name='未处理'
        }else if(item.name==1){
            item.name='处理中'
        }else{
            item.name='已处理'
        }
    })
  }
  option.value = {
    title: {
      text: "事件统计",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "right",
    },
    series: [
      {
        name: "事故查询",
        type: "pie",
        radius: "50%",
        data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
};
onMounted(() => {
  setTimeout(() => {
    changeOption(value.value);
  }, 100);
});

/* 遍历数组，统计某个值出现的次数，返回一个对象，对象中包含该值的数量 */
function countBy(arr) {
  let obj = {};
  for (let i = 0; i < arr.length; i++) {
    if (obj[arr[i]]) {
      obj[arr[i]]++;
    } else {
      obj[arr[i]] = 1;
    }
  }
  const arr2 = [];
  for (let key in obj) {
    arr2.push({ name: key, value: obj[key] });
  }
  return arr2;
}
</script>
<style scoped>
#checkbox {
  margin-right: 10px;
  margin-top: 10px;
}

.chart {
  width: 400px;
  height: 400px;
  z-index: 100;
  box-sizing: border-box;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
</style>
